﻿<template>

  <div class="address_collect">
    <div class="collect_header" ref="col_header">
      <img src="../../static/img/back_ccc.png" class="goback_col_header" ref="goback_col_header">
      <span class="collect_header_w">
        地址收藏
      </span>
      <img src="../../static/img/back_ccc.png" class="roteta_90" ref="roteta_90">
    </div>

    <!-- sec nav s -->
    <div class="sec_nav" ref="sec_nav">
        <div class="sec_nav_box" v-on:click="nav_box(1)" style="color:#9f5c2f">
          知己
        </div>
        <div class="sec_nav_box" v-on:click="nav_box(2)">
          盟友
        </div>
        <div class="sec_nav_box" v-on:click="nav_box(3)">
          同校
        </div>
        <div class="sec_nav_box" v-on:click="nav_box(4)">
          外校
        </div>
        <div class="sec_nav_box" v-on:click="nav_box(5)">
          黑名单
        </div>
    </div>
    <!-- sec nav e -->
    <!-- strange nav s -->

    <div class="strange_nav" ref="strange_nav">
      <div class="strange_nav_col">
           收藏数：108
      </div>
      <div class="now_rank_for_starnge_nav">
          当前排名：前1%
      </div>
      <div class="rank_nmt" v-on:click="ranK_cover">
          排行榜
        <img src="../../static/img/cup_p.png" class="ab_cup">
      </div>
    </div>
    <!-- strange nav e -->
    <!-- main s -->
    <div class="ad_c_main" ref="ad_c_main">

      <scroller :on-refresh="refresh"
                :on-infinite="infinite" ref="scroller_main">

        <!-- box s -->
        <div class="ad_c_mian_box" v-for="data_list in data_list">
          <!-- header s  -->
          <div class="ready_get_mes" v-show="false">
            待收信
          </div>
          <div class="ready_get_mes txz">
            通信中
          </div>
          <!-- header e-->

          <div class="ad_c_m_b_header">
            <!-- tips s -->
            <div class="wrap_tips">
              <img data-v-2c2c7cef="" src="/static/img/back_ccc.png" class="roteta_90 tips_s" v-on:click="tips($event)">
              <ul class="wrap_tips_bg" style="display: none">
                <li class="warp_tips_btn" style="background-color:#9f492e">
                  赠送
                </li>
                <li class="warp_tips_btn" style="background-color:#009c8d">
                  邀请
                </li>
                <li class="warp_tips_btn" style="background-color:#8fc320">
                  分享
                </li>
                <li class="warp_tips_btn" style="background-color:#eb6100" v-on:click="move_click($event)">
                  移动
                </li>
                <li class="warp_tips_btn" style="background-color:#dd3938">
                  删除
                </li>

              </ul>
              <div class="wrap_tips_yd" style="display: none">

                <ul class="wrap_tips_yd_inner">
                  <li class="wrap_tips_yd_inner_box">
                    知己
                  </li>
                  <li class="wrap_tips_yd_inner_box">
                    盟友
                  </li>
                  <li class="wrap_tips_yd_inner_box">
                    同校
                  </li>
                  <li class="wrap_tips_yd_inner_box">
                    外校
                  </li>
                  <li class="wrap_tips_yd_inner_box">
                    黑名单
                  </li>

                </ul>
              </div>
            </div>
            <!-- tips e-->
            <div class="ad_cM_b_header_left">
              <img src="../../static/img/bg_all.png" alt="Alternate Text" class="ad_header_user_img" />
              <p class="ad_user_id">ID:123456</p>
            </div>
            <!-- header rihgt s -->
            <div class="ad_cMB_header_right">
              <div class="header_right_header">
                华师
              </div>
              <div class="header_right_middle">
                <div class="header_right_middle_box">
                  笔名
                </div>
                <div class="header_right_middle_box">
                  性别
                </div>
                <div class="header_right_middle_box">
                  星座
                </div>
              </div>
              <div class="header_right_bottom">

              </div>
              <div class="last_bottom">
                <div class="last_bot_box">
                  <span class="last_bot_name">总收信</span>
                  <span class="last_bot_bot">10</span>
                </div>
                <div class="last_bot_box">
                  <span class="last_bot_name">总寄信</span>
                  <span class="last_bot_bot">10</span>
                </div>
                <div class="last_bot_box">
                  <span class="last_bot_name">本周收信</span>
                  <span class="last_bot_bot">10</span>
                </div>
                <div class="last_bot_box">
                  <span class="last_bot_name">本周寄信</span>
                  <span class="last_bot_bot">10</span>
                </div>
              </div>
            </div>
            <!-- header right e -->
          </div>
          <!-- 备注s -->
          <div class="beizhu">
            备注
          </div>
          <!-- 备注e -->
        </div>

        <!-- box e -->
      </scroller>

    </div>
    <!-- main e -->

    <!--rank s-->
    <div class="rank_cover" v-show="rank_cover" v-on:click.self="ranK_cover">
      <div class="rank_main">
          <!--header-->
        <div class="rank_header clearfix">
          <div class="rank_header_li f_l rank_header_li_act" v-on:click="ranl_header($event,'yizhiweimen/api/user/rank/weekSendLetter')">
              收信记录
          </div>
          <div class="rank_header_li f_l"  v-on:click="ranl_header($event,'yizhiweimen/api/user/rank/weekGetLetter')">
            寄信排行
          </div>
          <div class="rank_header_li  f_l"  v-on:click="ranl_header($event,'yizhiweimen/api/user/rank/weekAddressCollect')">
            地址排行
          </div>
        </div>
          <!--header-->
        <!--title-->
        <div class="rank_title">
          <img src="../../static/img/col_rank_title.png" alt="" style="width: 53.6vw;display: block;margin-left: 8.2vw;padding-top: 1.8vw;position: relative">
          <img src="../../static/img/cup_rank_www.png" style="width: 18.6vw;position: absolute;right: 0;top:-1vw;">
        </div>
        <!--title-->

        <!--rank list-->
        <ul class="rank_list clearfix">
           <li style="margin-top: 3.7vw;" class="clearfix" v-for="(rank_list,index) in rank_list.rankList">
             <img src="../../static/img/add_01.png"  v-show="rank_list.flag == 1" style="height: 10.6vw;display: inline-block;border-radius: 2vw;float:left;width:8vw;margin-left: 4.6vw;margin-right: 2.4vw;margin-top: 2vw;">
             <img src="../../static/img/add_02.png" v-show="rank_list.flag == 2" style="height: 10.6vw;display: inline-block;border-radius: 2vw;float:left;width:8vw;margin-left: 4.6vw;margin-right: 2.4vw;margin-top: 2vw;">
             <img src="../../static/img/add_01.png" v-show="rank_list.flag == 3" style="height: 10.6vw;display: inline-block;border-radius: 2vw;float:left;width:8vw;margin-left: 4.6vw;margin-right: 2.4vw;margin-top: 2vw;">
             <span class="rank_list_num" v-show="rank_list.flag == 4" style="height: 10.6vw;width: 10.6vw;line-height: 10.6vw;text-align: center;display: inline-block;vertical-align: top;float:left;font-size: 3.5vw;color:#aaa;margin-left: 4.6vw;margin-right: 2.4vw;">
               {{index+1}}
             </span>
             <img v-bind:src="rank_list.Image" class="rank_list_user_img" style="width: 10.6vw;height: 10.6vw;display: inline-block;vertical-align: top;float:left;border-radius: 2vw">
             <span class="rank_list_user_name" style="height: 10.6vw;width: 10.6vw;line-height: 10.6vw;text-align: center;display: inline-block;vertical-align: top;float:left;font-size: 3.5vw;color:#aaaaaa;">
               {{rank_list.UserName}}
             </span>
             <span class="rank_list_count" style="height: 10.6vw;width: 10.6vw;line-height: 10.6vw;text-align: center;display: inline-block;vertical-align: top;float:right;margin-right: 9.4vw;color:#f49800;font-weight: bold;font-size: 3.5vw;">
               {{rank_list.receLetter}}
             </span>
           </li>
        </ul>
        <!--rank list-->
      </div>
    </div>

    <!--ranke-->
  </div>

</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import '../../static/css/mint-ui/style.css'
  import MintUI from 'mint-ui'
  import VueScroller from 'vue-scroller'
  import limit_scroll from "../../static/js/limit_scroll.js";
  import { Toast, Indicator } from 'mint-ui';
  import qs from 'qs';
  import Vue from "vue";
  import axios from 'axios'
  import filter from "../filter/filter.js"
  import "../../static/css/Adventure/user_index_ad.css"
  import FooterMenu from "../index/FooterMenu.vue";
  import "../../static/js/use_rem.js";
  import "../../static/css/mint-ui/style.css"
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  import common from "../common/common.js"

  Vue.prototype.$http = axios;
  Vue.use(VueScroller);
  Vue.use(MintUI);

  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        divTop: "",
        img_list: [],
        show_nav_data: false,
        show_input_card: false,
        user_list: {},//用户信息
        default_logo: "wx.yizhiweimeng.com/static/static/img/icon_man.png",
        classify_show: false,
        user_id: "",
        class_list: "",
        classify_list: "",
        card_list: "",
        user_index_show_data: false,
        ad_visit:true,
        other_data: "",//scroll other_data
        cover_native_nav_show: false,
        hsl_bg: "",
        set_user_info: false,
        header_list: [{ c: true }, { c: false }, { c: false }, { c: false }],
        list: [{ item: 1 }, { item: 1 }, { item: 1 }, { item: 1 }, { item: 1 }, { item: 1 }],
        allLoaded: false,
        loading:false,
        sort_id:1,//类别id
        currentPage:1,//当前页码
        pageSize:10,//页面大小
        data_list:"",
        init_sec_nav_box:"",
        rank_cover:false,
        rank_list:""

      }
    },
    beforeCreate: function () {
      //获取用户 信息
      ///api/user / getUserById
    },
    created: function () {

    },
    methods: {
        //发信人排名
      send_rank_n:function (url) {
//        yizhiweimen/api/user/rank/weekSendLetter
        let id = location.search.split("user_id=")[1];
        Indicator.open();
        this.$http.post(url,
          qs.stringify(
            {
              "id": id,
              "currentPage": 1,
              "pageSize": 10,
            })
        )
          .catch((thrown) => {
            Indicator.close();
          })
          .then((e) => {
            Indicator.close();
            for(let cc=0;cc<e.data.rankList.length;cc++){
                if(cc==0){
                    e.data.rankList[cc].flag = 1;
                }else if(cc == 1){
                    e.data.rankList[cc].flag = 2;
                }else if(cc == 3){
                    e.data.rankList[cc].flag = 3
                }else{
                    e.data.rankList[cc].flag = 4
                }

            }
            this.rank_list = e.data
          })

      },
      ranK_cover:function () {
        this.rank_cover = !this.rank_cover;
        if(this.rank_cover == true){
          this.send_rank_n("yizhiweimen/api/user/rank/weekSendLetter")
        }
      },
      ranl_header:function(el,url){
         let cc =  el.target.parentNode.children;

         for(let x = 0 ;x <cc.length;x++ ){

           cc[x].className = cc[x].className.replace(" rank_header_li_act","")
         }
        el.target.className +=" rank_header_li_act";
        this.send_rank_n(url)
      },
      nav_box:function(num){
          console.log( this.init_sec_nav_box)
          for(let x = 0;x < this.init_sec_nav_box.length;x++){//default color
                  this.init_sec_nav_box[x].style.color= "#8c8c8c"
          }
          //=click color
         this.init_sec_nav_box[num-1].style.color = "#9f5c2f"
         this.sort_id = num;
         this.get_data()
      },
      refresh: function (done) {
        this.first_flag = false;
        this.page_n = 1;
        let myFirstPromise = new Promise((resolve, reject) => {
          this.get_data(resolve, reject);
        });
        myFirstPromise.then((x) => {
          if (x.length < 10) {
            done();
          }
        })
      },
      infinite: function (done) {
        if (this.first_flag == false) {
          this.page_n = 1;
        } else {
          this.page_n += 1;
        }

        let myFirstPromise = new Promise((resolve, reject) => {
          this.get_data( resolve, reject);
        });

        myFirstPromise.then((successMessage) => {
          // console.log("promise___fuck_you_bitch");
          //successMessage的值是上面调用resolve(...)方法传入的值.
          //successMessage参数不一定非要是字符串类型，这里只是举个例子
          //如果 没有返回值就是 到底了 没有数据了 我日
          if (successMessage.length == 0 || successMessage == "" || successMessage == undefined || successMessage.length < 10) {
            done();
            this.$refs.scroller_main.finishInfinite(2);
          }
        })
        .catch(
          // Log the rejection reason
          (reason) => {
          console.log('Handle rejected promise (' + reason + ') here.');
        });

        if (this.first_flag == false) {
          this.first_flag = true;
        }
      },
      get_data:function (resolve,reject) {
//        /api/user/collect/findCollectById
        Indicator.open();
        let id = location.search.split("user_id=")[1];
        let base_url = common.get_base_url();
        this.$http.post('/yizhiweimen/api/user/collect/findCollectById',
          qs.stringify(
            {
              "sortId": this.sort_id,
              "userId": id,
              "currentPage": this.currentPage,
              "pageSize": this.pageSize
            })
          )
          .catch((thrown) => {
          Indicator.close();
          try{
            reject();
          }catch (e){

          }
        })
        .then((e) => {
          Indicator.close();
          try{
            resolve(e.data);
          }catch (e){}
          this.data_list =e.data;
        })
      },
      move_click:function (el) {
        let dis =  el.target.parentNode.parentNode.children[2];
        dis.style.display === "block" ? dis.style.display = "none" :dis.style.display = "block";
      },
      tips:function (el) {
        let dis =  el.target.nextElementSibling;
        dis.style.display === "block" ? dis.style.display = "none" :dis.style.display = "block";
      }
    },
    components: {

    },
    mounted: function () {
      let col_header = window.getComputedStyle(this.$refs.col_header,"height").height.replace("px","");
      let header_h = window.getComputedStyle(this.$refs.sec_nav, "height").height.replace("px","");
      let strange_h = window.getComputedStyle(this.$refs.strange_nav, "height").height.replace("px", "");

      let main_h = document.body.clientHeight;
      this.$refs.ad_c_main.style.height = main_h - parseInt(col_header) - parseInt(header_h) - parseInt(strange_h)+ "px";
      let id = location.search.split("user_id=")[1];

      //dom
      this.init_sec_nav_box = document.querySelectorAll(".sec_nav_box");
//      /api/user/address/collect/findById
      //get nav_data
      this.$http.post('/yizhiweimen/api/user/address/collect/findById',
        qs.stringify(
          {
            "id": id,
            "currentPage": 1,
            "pageSize": 10,
            "sortId":1
          })
        )
        .catch((thrown) => {
        Indicator.close();
      })
      .then((e) => {
        Indicator.close();
        this.data_list = e.data
      })

    },

  }
</script>

<style>
  ._v-container{
    margin-top: 35vw;
  }
  .ad_c_main {
    overflow-y:scroll;
    overflow-x: hidden;
    background-color: #eeeeee;
  }
  .ad_c_mian_box {
    height: 46vw;
    width: 94vw;
    border-radius: 2vw;
    background-color: #9f5c2f;
    margin: 2.4vw auto 6.4vw;
    box-shadow: 2px 2px 4px 2px #8c8c8c;
    position:relative;
  }
  .beizhu {
    width: 86vw;
    margin-left:6vw;
    border-radius:2vw;
    height: 6.2vw;
    line-height: 6.2vw;
    text-align: center;
    color: #9f5c2f;
    background-color:#fff;
  }
</style>
<style scoped>
  /*rank_cover s*/
  .rank_list li{
    height: 10.6vw;
    line-height: 10.6vw;
    color:#000000;
  }
  .rank_list{
    height: 120vw;
    width:100%;
    background-color: #ffffff;
    border-radius:  0 0 2vw 2vw;
  }
  .rank_title{
    background-color: #f49800;
    height: 12.5vw;
    border-radius: 0 2vw 0 0 ;
  }
  .rank_header .rank_header_li_act{
    background-color: #f49800;
  }
  .rank_header_li{
    width:19.3vw;
    height: 8vw;
    border-radius: 2vw 2vw 0 0;
    background-color: #aaaaaa;
    text-align: center;
    line-height: 8vw;
    color:#fff;
    font-size: 3.5vw;
    float: left;
    margin-left: 0.5vw;
  }
  .rank_cover{
    background-color:#8e8c8c80;
    width: 100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
  }
  .rank_main{
      width:79.3vw;
      height: 152vw;
      position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  /*rank_cover e*/
/*main_boxs*/
  /*tips s*/
  .wrap_tips_yd_inner {
    width: 11vw;
    background-color: #ba6b33;

    border-radius:2vw;
    text-align:center;

    color:#fff;
    margin:0 auto;
  }
  .wrap_tips_yd_inner_box{
    height:9vw;
    line-height:9vw;
    width:11vw;
    text-align:center;
    font-size:3vw;
    margin:0 auto;
  }
  .wrap_tips_yd {
    background-color: #8c8c8cb8;
    width: 14vw;
    height: 44.8vw;
    position: absolute;
    top: 16vw;
    right: 0;
    z-index: 100;
    right: 28vw;
    z-index: 100;
    border-radius: 2vw;
  }
  .warp_tips_btn {
    height: 7vw;
    line-height: 7vw;
    color: #fff;
    font-size: 3vw;
    text-align: center;
    width: 12.8vw;
    border-radius: 2vw;
    margin: 1.5vw auto;
  }
  .wrap_tips_bg {
    background-color: #8c8c8cb8;
    width: 14vw;
    height: 44.8vw;
    position: absolute;
    top: 4vw;
    right: 0;
    z-index: 100;
    right: 14vw;
    z-index: 100;
    border-radius: 2vw;
  }
  .wrap_tips {
    position: absolute;
    right: -14vw;
    top: 3vw;
    width: 4vw;
  }
  .tips_s {
  }
  /*tips e*/
  .ad_c_mian_box .txz {
    background-color: #eb6100
  }
  .ready_get_mes {
    height: 4.9vw;
    line-height: 4.9vw;
    width: 11.4vw;
    position: absolute;
    top: -2vw;
    left: -4px;
    z-index: 100;
    background-color: #959595;
    color: #fff;
    text-align: center;
    border-radius: 1vw;
    font-size: 2.5vw;
  }
  .last_bot_box {
    margin-left: 2vw;
  }
  .last_bot_bot {
    padding: 1vw 2.3vw;
    background-color: #fff;
    color: #9f5c2f;
    font-size: 3vw;
    border-radius: 2vw;
  }
  .last_bot_name {
    font-size: 3vw;
    color: #fff;
  }
  .last_bottom {
    position: absolute;
    bottom: -3vw;
    left: 0;
    width: 100%;
    height: 8vw;
    line-height: 8vw;
    background-color: #ec6941;
    border-radius: 2vw;
    display: flex;
    justify-content:space-around;
  }
  .beizhu {
    width: 86vw;
    margin-left:6vw;
    border-radius:2vw;
    height: 6.2vw;
    line-height: 6.2vw;
    text-align: center;
    color: #9f5c2f;
    background-color:#fff;
  }
  .header_right_bottom {
    height: 13.8vw;
    background-color: #fff;
    border-radius: 0 0 2vw 2vw;
    margin-bottom: 2.1vw;
  }
  .header_right_header {
    height: 6.3vw;
    line-height: 6.3vw;
    color: #fff;
    text-align: center;
    border-radius: 2vw 2vw 0 0;
    font-size: 4vw;
    background-color: #fea501;
  }
  .header_right_middle_box {
    width: 33vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #9f5c2f;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
  }
  .header_right_middle {
    height:7.5vw;
    line-height:7.5vw;
    font-size:3vw;
    text-align:center;
    background-color:#fff;
    width: 100%;
    color: #8c4b23;
    display: flex;
    justify-content: space-around;
  }
  .ad_cMB_header_right {
    width: 59vw;
    border-radius: 2vw;
    margin-top:2.5vw;
    margin-left:3vw;
  }
  .ad_c_m_b_header {
    display: flex;

  }
  .ad_user_id{
    margin-left:5.3vw;
    line-height:1;
    margin-top:2.4vw;
  }
  .ad_header_user_img {
    display:block;
    height: 22.1vw;
    border-radius: 50%;
    margin-top: 2.4vw;
    margin-left:3vw;
    /*margin-left: 5.3vw;*/
    width: 22.1vw;
  }
  .ad_c_mian_box {
    height: 46vw;
    width: 94vw;
    border-radius: 2vw;
    background-color: #9f5c2f;
    margin: 2.4vw auto 2.4vw;
    box-shadow: 2px 2px 4px 2px #8c8c8c;
    position:relative;
  }

/*main_boxe*/
  /*main s*/
  .ad_c_main {
    overflow-y:scroll;
    overflow-x: hidden;
    background-color: #eeeeee;
  }
  /*main e*/
  .rank_nmt {
    font-size:4vw;
    color: #fff;
    background-color: #dd3b38;
    height:8vw;
    border-radius:2vw;
    position:relative;
    padding-left:3vw;
    line-height:2;
    padding-right:7.2vw;
    margin-top:1.5vw;
  }
  .ab_cup {
    width: 5vw;
    height: 5.2vw;
    position: absolute;
    top: 17%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    right: -4px;
  }
  .collect_header_w {
    margin-left: 12.6vw;
  }
  .collect_header {
    position: relative;
    text-align: left;
  }
  .address_collect_header {
    position: relative;
    height: 11.7vw;
    background-color: #9f5c2f;
    line-height: 11.7vw;
    width: 100%;

  }

  /*strange_nav s*/
  .now_rank_for_starnge_nav {
    width: 46vw;
    height: 8.2vw;
    line-height: 8.2vw;
    margin-top: 1.3vw;
    color: #a4622e;
    text-align: center;
    border-radius: 2vw;
    font-size: 3vw;
    background-color: #fea501;
  }
  .strange_nav_col {
    color: #9f5c2f;
    font-size: 4vw;
    margin-left: 1.2vw;
  }
  .strange_nav {
    height: 11.2vw;
    line-height: 11.2vw;
    width: 100%;
    font-size: 3vw;
    display:flex;
    justify-content:space-between;
  }
  /*strange_nav e*/
  /*sec nav s*/
  .sec_nav {
    height: 11.2vw;
    width: 100%;
    line-height: 11.2vw;
    color: #8c8c8c;
    font-size: 3vw;
    text-align: center;
    display: flex;
    justify-content: space-around;
  }
  /*sec nav e*/
  /*header s*/
  .roteta_90 {
    width: 5vw;
    height: 7vw;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%) rotate(-90deg);
    right: 15.4vw;
  }
  .address_collect {
    height: 11.7vw;
    line-height: 11.7vw;
    background-color: #9f5c2f;
    color: #fff;
    font-size: 4vw;
  }
  .goback_col_header {
    width: 5vw;
    height: 7vw;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 3vw;
  }
  /*header e*/
</style>
